<link rel="stylesheet" href="../static/css/style.css">
<link rel="stylesheet" href="../static/css/styleoneadd.css">
<link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/plugins/bootstrap-3.3.7/css/bootstrap.min.css">
<style>
    body{
        background-color: #f2f2f2 !important;
    }
</style>

    <!-- 内容主体区域 -->
<div class="layui-fluid-pad" ng-app="createPaper" ng-controller="addPaper">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                <label>创建问卷</label>
                <a  href="javascript:;" class="layui-btn  layui-t-h backs-btn">
                    <i class="layui-icon">&#xe65c;</i>
                    返回
                </a>
            </div>
            <div class="layui-card-body">
                <div class="layui-row  layui-pad15">
                    <form class="layui-form" action="" lay-filter="test_form">
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row">
                                <div class="layui-col-md2  layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a">问卷名称</label>
                                </div>
                                <div class="layui-col-md3">
                                    <input type="text" id="newPaperName" name="title"  autocomplete="off" class="form-control"/>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row ">
                                <div class="layui-col-md2  layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a">使用现有问卷</label>
                                </div>
                                <div class="layui-col-md3">
                                    <select name="city" id="paperName"  class="form-control" lay-ignore>
                                        <option value="">请选择现有问卷</option>
                                        <option value="{{partPaper.ID   }}" ng-repeat="partPaper in paperNameList">{{partPaper.name}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-col-lh">
                            <div class="layui-row ">
                                <div class="layui-col-md2 layui-display-flex layui-width-b">
                                    <label class="layui-form-label layui-width-a">问卷类型</label>
                                </div>
                                <div class="layui-col-md3">
                                    <select name="city" id="classType"  class="form-control" lay-ignore>
                                        <option value="">请选择问卷类型</option>
                                        <option value="{{classType.typeName}}" ng-repeat="classType in typeList">{{classType.typeName}}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-addStyle" id="addQuestionStyle">

                        </div>
                        <div class="layui-col-md12 layui-col-lh ">
                            <div class="layui-col-md2 layui-width-b layui-text-right">
                                <button type="button" href="#" class="layui-btn layui-t-h " id="addwenjuan">添加问题</button>
                            </div>
                        </div>
                        <div class="layui-col-md12 layui-text-center">
                            <button type="button" class="layui-btn layui-btn-w layui-t-h" ng-click="savePaper()">
                                <i class="layui-icon">&#xe681;</i>
                                提交
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>


<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/angular.js"></script>
<script src="../static/js/app/consts/consts.js"></script>
<script>

    var getAllPaperNameURL = baseUrl + "/exam/getAllPaperName";
    var getAllTypeURL = baseUrl + "/exam/getAllType";
    var getPaperByIdURL = baseUrl + "/exam/getPaperById";
    var addPaperURL = baseUrl + "/exam/addPaper"

    var app = angular.module('createPaper',['ng']);
    app.controller('addPaper',function ($scope, $http) {
        $(function () {
            //获取所有的问卷名称
            $http({
                methond:"GET",
                url:getAllPaperNameURL,
                papams:{
                    token:"123456"
                }
            }).then(function successCallback(result) {
                console.log(result.data.data);
                $scope.paperNameList = result.data.data;
            });
            //获取所有的问卷的类型
            $http({
                method:"GET",
                url:getAllTypeURL,
                params:{
                    token:"123456"
                }
            }).then(function successCallback(result) {
                $scope.typeList = result.data.data;
//                console.log($scope.typeList);
            });
            updateForm();
        });

        //问卷下拉事件
        $("select#paperName").change(function () {
//            console.log(console.log($(this).val()));
            $(".layui-addStyle").empty();
            var paperId = $(this).val();
            $http({
                method:"POST",
                url:getPaperByIdURL,
                data:{
                    token:"123456",
                    paperId:paperId
                },
                headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                transformRequest: function(obj) {
                    var str = [];
                    for(var p in obj){
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                }
            }).then(
                function successCallback(result) {
                    console.log(result.data.data);
                    var questionList = result.data.data.questionList;
                    for(var i = 0; i  < questionList.length; i++) {
                        var optionType = questionList[i].optionType;
                        if(optionType === 1) {
                            danxuan(questionList[i]);
                        } else if(optionType === 2) {
                            duoxuan(questionList[i]);
                        }
                    }
                }
            );
        });


        //提交按钮
        $scope.savePaper = function () {
            var questionIds = [];
            $("#addQuestionStyle input[type='hidden']").each(function () {
                questionIds.push($(this).val());
            });
            console.log(questionIds);
            var newPaperName = $("#newPaperName").val()?($("#newPaperName").val()):"";
            var paperId = $("#paperName").val()?($("#paperName").val()):"";

            var url = addPaperURL;

            var classType = $("#classType").val()?($("#classType").val()):"";
            if(classType === null || classType === undefined || classType === "") {
//                alert("请选择问卷类型");
                alertMsg("请选择问卷类型");
                return;
            }

            var serials = [];
            for(var i = 0; i < questionIds.length; i++) {
                serials.push(i + 1);
            }

            var data = JSON.stringify({
                token:"123456789",
                newPaperName:newPaperName,
                paperId:paperId,
                classType:classType,
                questionIds:questionIds,
                serials:serials
            });
            $http.post(url, data).then(
                function successCallback(result) {
                    console.log(result.data.message);
                    alertMsg(result.data.message);
                    window.location.href = "paperManage.html";
                },function errorCallback(result) {
                    window.location.href = "paperManage.html";
                }
            );
        }

    });

    function alertMsg(msg) {
        layui.use(['layer'], function () {
            var layer = layui.layer;
            layer.msg(msg);
        });
    }

    //多选题目展示
    function duoxuan(data) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh layui-form" lay-filter="test2"  style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left: 2rem;">';
        html += '<i class="layui-icon" style="font-size: 18px;float: right;margin-right: 5px;cursor: pointer" onclick="deleteDIV(this)">&#x1007;</i><span style="font-size: 15px;font-weight: bold">'+ data.content+'</span>'
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div>';
        html += '<div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md3 layui-margin-bot" style="width: 100%;">';
        var answers = data.answers;
        for(var i = 0 ;i < answers.length; i++) {
            html += '<div class="layui-mingzi" style="display: inline-block;float: none">';
            html += '<input type="checkbox" name="" lay-skin="primary" >';
            html += '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i> </div>';
            html += '<label>' + answers[i].content + '</label>';
            html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $(".layui-addStyle").append(html);
    }

    //单选题目展示
    function danxuan(data) {
        var html = '';
        html += '<div class="layui-col-md12 layui-col-lh" style="border:1px solid #ccc;">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md12" style="padding-left: 2rem;">';
        html += '<i class="layui-icon" style="font-size: 18px;float: right;margin-right: 5px;cursor: pointer" onclick="deleteDIV(this)">&#x1007;</i><span style="font-size: 15px;font-weight: bold">';
        html += data.content + '</span>';
        html += '<input type="hidden" value="' + data.questionsId + '"/>';
        html += '</div><div class="layui-col-md12 layui-left-pad15">';
        html += '<div class="layui-row">';
        html += '<div class="layui-col-md3 layui-margin-bot" style="width: 100%;">';
        var answers = data.answers;
        for (var i = 0 ;i < answers.length; i++) {
            html += '<div class="layui-mingzi" style="display: inline-block;float: none">';
            html += '<input type="radio" name="sex" value="' + answers[i].content +'" title="' + answers[i].content + '"/>';
            html += '<div class="layui-unselect layui-form-radio">';
            html += '<i class="layui-anim layui-icon"></i><div>' + answers[i].content + '</div></div>';
            html += '</div>';
        }
        html += '</div>';
        html += '</div></div></div></div>';

        $(".layui-addStyle").append(html);


    }
    
    function updateForm() {
        layui.use(['form','layer'], function(){
            var form = layui.form;
            form.render(null, 'test_form');
        });
    }
    
    function deleteDIV(that) {
        $(that).parents('.layui-col-lh').remove();
    }
    
    //Demo
    layui.use(['form','layer'], function(){
        var form = layui.form;

        //监听提交
//        form.on('submit(formDemo)', function(data){
//            layer.msg(JSON.stringify(data.field));
//            return false;
//        });

        //增加选项
        $(function () {
            $('#addwenjuan').on('click',function () {
                var strU = 'add_paper.html';
                layer.open({
                    type: 2,
                    title:'平台单向库',
                    area: ['850px', '500'],
                    shadeClose: true, //开启遮罩关闭
                    content: strU
                });
            });
        });
    });
</script>


